<template>
  <q-page class="q-pa-md">
    <q-btn v-if="props.showBackToHomeBtn" class="float-right" color="primary" icon="arrow_back" outline :title="$t('返回')" to="/" />
    <div class="q-pb-md text-h5">{{ pageTitle }}</div>
    <div class="q-pa-md shadow-2">
      <img :src="props.logo" :style="props.logoStyle" v-if="props.showLogo" alt="logo" />
      <div class="q-mt-sm text-subtitle1 text-weight-bolder">{{ pkgInfo.productName }}</div>
      <slot></slot>
      <div class="q-mt-sm row no-wrap">
        <div class="q-mr-md about-label">{{$t('前端版本')}}</div>
        <div>{{ pkgInfo.productName }} {{ pkgInfo.version }} ({{ frontendVersion }})</div>
      </div>
      <div class="row no-wrap">
        <div class="q-mr-md about-label">{{$t('后端版本')}}</div>
        <div>{{ backendVersion }}</div>
      </div>
      <div class="q-mt-sm row no-wrap" v-if="props.authTo">
        <div class="q-mr-md about-label">{{ $t('使用授权') }}</div>
        <div>{{ props.authTo }}</div>
      </div>
    </div>
  </q-page>
</template>

<script lang="ts">
export default {
  name: 'aboutStd'
}
</script>
<script lang="ts" setup>

import {useTitleHelper} from '../../hooks/titleHelper'
import {ref} from 'vue'
//@ts-ignore
import njtLogo from '../../assets/njtlogo.png'

interface PropsDef {
  //是否使用严格密码
  logoStyle?: object | null
  //LOGO
  logo?: string
  //是否显示logo，默认true
  showLogo?: boolean
  //授权给...
  authTo?: string
  //是否显示返回首页的按钮
  showBackToHomeBtn?: boolean
}

const props = withDefaults(defineProps<PropsDef>(), {
  logoStyle: null,
  logo: njtLogo,
  showLogo: true,
  authTo: '内部使用',
  showBackToHomeBtn: false
})


const pageTitle = '关于'
useTitleHelper(pageTitle)

const frontendVersion = ref('加载中...')
const backendVersion = ref('加载中...')

$f.axios.get<string>('/comm/about/get-about-info').then((resp) => {
  backendVersion.value = resp.data
}).catch((err) => {
  $f.ui.showNotifyFailed($f.getAxiosErrMsg(err))
})

interface BuildInfo {
  ver: string
}

$f.feAxios.get<BuildInfo>($f.getSiteUrl('build-info.json')).then((resp) => {
  frontendVersion.value = resp.data.ver
}).catch((err) => {
  $f.ui.showNotifyFailed($f.getAxiosErrMsg(err))
})

const pkgInfo = $f.packageInfo

</script>

<style lang="sass" scoped>
.about-label
  width: auto
  min-width: 70px
</style>
